<template>
  <div class="feedback">
   <header-bar :text="title" :left="left"></header-bar>
  <div class="feedback-box">
    <textarea class="clsinp" maxlength="100" v-model="txt" placeholder="请输入不少于10个字不多于100个字的描述" minlength="10">
    </textarea>
    <div class="clsmsg">
      {{computedCharLen}}/100
    </div>
  </div>
   <div class="feedbackbtnbg">
      <button :class="{feedbackbtn:computedCharLen>=10}" @click="postfeedback(computedCharLen>=10)">提交</button>
    </div>
  </div>
</template>
<script>
import headerBar from "./main/header";
import { Header, Toast } from "mint-ui";
import { opinionsend } from "../api/api.js";
export default {
  name: "Feedback",
  data() {
    return {
      msg: "",
      txt: "",
      title: "意见反馈",
      left: {
        status: true
      }
    };
  },
  components: {
    headerBar
  },
  methods: {
    methodGetByteLen(str, len) {
      if (this.computedByteLen <= len) {
        return str;
      }
      for (let i = Math.floor(len / 2); i < str.length; i++) {
        if (str.substr(0, i).replace(/[^\x00-\xff]/g, "01").length >= len) {
          return str.substr(0, Math.floor(i / 2) * 2) + "...";
        }
      }
    },
    postfeedback(a) {
      if (a) {
        let para = {
          id: sessionStorage.getItem("user")
            ? JSON.parse(sessionStorage.getItem("user")).id
            : "",
          token: sessionStorage.getItem("token")
            ? JSON.parse(sessionStorage.getItem("token"))
            : "",
          content: this.txt
        };
        opinionsend(para)
          .then(res => {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            if (res.code == 200) {
              this.$router.push({ path: "/help" });
            }
          })
          .catch(err => {
            Toast({
              message: "请求超时",
              position: "bottom",
              duration: 5000
            });
          });
      } else {
        Toast({
          message: "请输入不少于10个字不多于100个字的描述",
          position: "bottom",
          duration: 5000
        });
      }
    }
  },
  computed: {
    // 获取字符的个数
    computedCharLen() {
      return this.txt.length;
    },
    // 获取字节的个数
    computedByteLen() {
      return this.txt.replace(/[^\x00-\xff]/g, "01").length;
    },
    // 控制显示的内容
    computedTxt() {
      return this.methodGetByteLen(this.txt, 10);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/feedback.css");
</style>
